Skip to main content link. Accesskey S
  • Help
  • HCL Logo
  • HCL Notes and Domino Application Development wiki
  • THIS WIKI IS READ-ONLY. Individual names altered for privacy purposes.
  • HCL Forums and Blogs
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • API Documentation
Search
Community Articles > 日本語 - Japanese > XPagesとjQueryMoileでモバイル用メニュー紹介アプリを作ってみよう
  • Share Show Menu▼
  • Subscribe Show Menu▼

Recent articles by this author

Community articleXPagesとjQueryMoileでモバイル用メニュー紹介アプリを作ってみよう
Added by ~Miriam Quettoomannivu | Edited by ~Miriam Quettoomannivu on May 21, 2013 | Version 13
expanded Abstract
collapsed Abstract
jQueryMobileを使って、カテゴリを階層表示し、添付ファイルをリストビューに表示するモバイルアプリケーションの作り方です。
Tags: XPages, javascript, japanese
ShowTable of Contents
HideTable of Contents
  • 1 はじめに(完成形と効果)
  • 2 準備する物
  • 3 作成するXPagesファイルの構成
  • 4 jQueryMobileをNSFファイルに組み込む
  • 5 XPagesにjQueryMobileを組み込む
  • 6 1ページ目:ビューのカテゴリを表示する①
  • 7 2ページ目:ビューのカテゴリを表示する②
  • 8 3ページ目:ビューの文書を表示する
  • 9 4ページ目:フォームを表示する
  • 10 戻るボタンを作る

はじめに(完成形と効果)

ノーツのカテゴリと添付ファイルを表示するモバイルメニュー紹介アプリです。

この方法のメリットは1画面につき1XPagesなのでデバッグが容易な点と、カテゴリの絞り込みにURL引数でカテゴリフィルタを使っているので、画面単位で作れるため開発生産性が高い点です。

準備する物

  • テキストフィールドと画像添付用のリッチテキストフィールド、添付された画像のファイル名を計算する複数値可能フィールドを配置します。

  • ビューは2段階のカテゴリを付けたビューです。

  • データは適当に項目を入力し、画像ファイルを添付しておきます。

 

作成するXPagesファイルの構成

下記の4つのXpagesを作成します。

Xpagesの名前

内容

cate1.xsp

1ページ目

リスト(ビュー)表示。カテゴリ1階層目。

cate2.xsp

2ページ目

リスト(ビュー)表示。カテゴリ2階層目。

cate3.xsp

3ページ目

リスト(ビュー)表示。イメージと文書を表示。

frm.xsp

4ページ目

フォーム表示。

 

 

jQueryMobileをNSFファイルに組み込む

1.jQueryのHPからjQueryとjQueryMobileをダウンロードします。

種類

URL

内容

JavaScriptライブラリ

http://code.jquery.com/jquery-1.9.1.min.js

jQuery本体

一括ダウンロード用

圧縮ファイル

http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.zip

 

jQueryMobile本体

jQueryMobileCSS

画像などリソースファイル

※バージョンが変わっている場合はこちらから

http://jquery.com/download/

http://jquerymobile.com/download/

 

2.ダウンロードしたjquery.mobile-1.3.0.zipを適当なフォルダに解凍します。

 

3.jQueryを組み込みたいノーツアプリケーションを開き、設計要素から「リソース-ファイル」を開きます。

 

4.[ファイルリソースのインポート]ボタンを押し、ダウンロードしたjQuery、jQueryMobileを登録します。

種類

ファイル名

補足

JavaScriptライブラリ

jquery-1.9.1.min.js

 

JavaScriptライブラリ

jquery.mobile-1.3.0.min.js

 

jquery.mobile-1.3.0.zipを解凍したファイル

スタイルシート

jquery.mobile-1.3.0.min.css

jquery.mobile-1.3.0.zipを解凍したファイル

【イメージ】

 

5.jquery.mobile-1.3.0.zipを解凍したフォルダから画像ファイルをイメージリソースに登録します。

標準ではpngファイルが選択できないので、ファイル名に「*.*」と入力し、全てのファイルを表示させます。

取り込んだファイルにはフォルダ名がつかないので、名前の変更を使ってファイル名の前に「images/」というパスを追加します。

フォルダ

ファイル名(ファイルシステム)

インポート後の名前(イメージリソース)

images

ajax-loader.gif

images /ajax-loader.gif

images

icons-18-black.png

images /icons-18-black.png

images

icons-18-white.png

images /icons-18-white.png

images

icons-36-black.png

images /icons-36-black.png

images

icons-36-white.png

images /icons-36-white.png

【イメージ】

 

 

XPagesにjQueryMobileを組み込む

  • 新規Xpagesを作成し、ソースタブにjquery moibileを組み込むためのタグを書き込みます。Xpagesのプロパティ-リソースからファイルを順番に選択しても同様の操作が可能です。

【XPagesソース】

	<xp:this.resources>

	        <xp:script src="/jquery-1.9.1.min.js" clientSide="true"></xp:script>

	        <xp:script src="/jquery.mobile-1.3.0.min.js"

	                clientSide="true">

	        </xp:script>

	        <xp:styleSheet href="/jquery.mobile-1.3.0.min.css"></xp:styleSheet>

	</xp:this.resources>

	

【イメージ】

 

 

1ページ目:ビューのカテゴリを表示する①

1.データリソースとしてカテゴリのビューを登録します。

【イメージ】

 

2.1ページ目はカテゴリのみ表示するため、データソースプロパティの「expandLevel」に“1”を指定します。

【イメージ】

 

3.XpagesのソースにjQueryMobileでヘッダー、コンテンツの基本構文となるタグを入力します。(データソースが指定してあるタグの下)

【XPagesソース】

	<!--ページの設定-->

	<div data-role="page">

	        <!--ヘッダの設定-->

	        <div data-role="header">

	        </div>

	               

	        <!--コンテンツの設定-->

	        <div data-role="content">

	        </div>

	</div>

	

【イメージ】

 

4.テーマカラーを変更したい場合には、<div>タグに「data-theme」を指定します。

【XPagesソース】

	<!--ページの設定-->

	<div data-role="page" data-theme="b">

	

 

5.ヘッダータグに内容を設定します。

【XPagesソース】

	<div data-role="header">

	        <h1>分類</h1>

	</div>

	

 

6.コンテンツの中に<ul>タグを配置し、ListViewを作ります。

【XPagesソース】

	<!--コンテンツの設定-->

	<div data-role="content">

	        <ul data-role="listview">

	                       

	        </ul>

	</div>

	

【イメージ】

 

7.右のコンテナコントロールから繰り返しコントロールをドラッグ&ドロップでListViewタグの下に配置し、繰り返しコントロールの名前(デフォルトはrepeat1を消します。(名前が残っているとjquery mobileのスタイルが反映されません。)

【XPagesソース】

	<!--コンテンツの設定-->

	<div data-role="content>

	        <ul data-role="listview">

	                <xp:repeat rows="30" value="#{view1}">

	 

	</xp:repeat>

	        </ul>

	</div>

	

 

8.ページ替えをさせないため、オプションの繰り返し頻度には大きな値を入れ(例では9999)、コレクション名に「dataRow」と設定します。

【イメージ】

 

9.<li>タグを入れます。

【XPagesソース】

	<ul data-role="listview">

	        <xp:repeat rows="9999" value="#{view1}">

	                <li>

	                                               

	                </li>

	</xp:repeat>

	</ul>

	

 

9.右のコアコントロールからリンクコントロールをドラッグ&ドロップで<li>タグの下に配置し、ラベルを消します。

【XPagesソース】

	<xp:repeat value="#{view1}" var="dataRow" rows="9999">

	       <li>

	              <xp:link escape="true" id="link1">

	 

	</xp:link>

	       </li>

	</xp:repeat>

	

 

10.右のコアコントロールから計算結果フィールドをドラッグ&ドロップでリンクコントロールの下に配置します。

【XPagesソース】

	<li>

	       <xp:link escape="true" id="link1">

	              <xp:text escape="true"

	                     id="computedField1">

	              </xp:text>

	       </xp:link>

	</li>

	

 

11.リンクコントロールを選択し、オプション-リンクタイプ-URLの横にある◇をクリックし、2ページ目のXpagesを指定し、URL引数にcategoryFillterを設定します。

【SSJSソース】

"/cate2.xsp?OpenXpage&categoryFilter=" + dataRow.getColumnValues().get(0)

【イメージ】

 

11.計算結果フィールドを選択し、値-使用するバインドデータに「JavaScript」を選択し、カテゴリがある場合のみ値を表示する式を書き込みます。

【SSJSソース】

dataRow.isCategory() ? dataRow.getColumnValues().get(0) : null

【イメージ】

 

12.スマートフォンの画面にあわせるため、サイズをデバイスの幅に指定するHTMLをXPagesソースに書き込みます。(データソース指定の下あたり)

【XPagesソース】

	<!-- サイズをデバイスの幅に設定、倍率を固定-->

	<meta name="viewport" content="width=device-width, initial-scale=1" />

	

【イメージ】

 

 

2ページ目:ビューのカテゴリを表示する②

1.1ページ目(cate1.xsp)をコピーし、2ページ目(cate2.xsp)にリネームします。

 

2.2ページ目のXPagesを開き、ソースタブでヘッダーの内容を変更します。

【XPagesソース】

	<div data-role="header">

	        <h1>種別</h1>

	</div>

	

 

2.リンクコントロールを選択し、オプション-リンクタイプ-URLの横にある◇をクリックし、3ページ目のXpagesを指定し、URL引数にcategoryFillterを設定します。(URL引数から1階層目、クリックした列から2階層目を取得)

【SSJSソース】

	"/cate3.xsp?OpenXpage&categoryFilter=" + param.get("categoryFilter") + "\\" + dataRow.getColumnValues().get(1)

	

【イメージ】

 

3.計算結果フィールドを選択し、値-使用するバインドデータに「JavaScript」を選択し、カテゴリがある場合のみ値を表示する式を書き込みます。(2列目を取得)

【SSJSソース】

	dataRow.isCategory() ? dataRow.getColumnValues().get(1) : null

	

【イメージ】

 

 

3ページ目:ビューの文書を表示する

1.1ページ目(cate1.xsp)をコピーし、3ページ目(cate3.xsp)にリネームします。

 

2.3ページ目のXPagesを開き、ソースタブでヘッダーの内容を変更します。

【XPagesソース】

	<div data-role="header">

	        <h1>メニュー</h1>

	</div>

	

 

3.リンクコントロールを選択し、オプション-リンクタイプ-URLの横にある◇をクリックし、4ページ目のXpagesを指定し、URL引数にdocumentIdを設定します。

【SSJSソース】

	"/frm.xsp?OpenXpage&documentId="+dataRow.getDocument().getUniversalID();

	

【イメージ】

 

4.リンクコントロールを選択し、オプション-リンクイメージを追加にチェックを付け、イメージの横にある◇をクリックし、添付ファイル画像を表示する式を書き込みます。(表示される添付ファイルは一つ目)

【SSJSソース】

	"/"+dataRow.getDocument().getUniversalID()+"/$File/"+@Subset(dataRow.getDocument().getItemValue("ImageFileNameList"),1)

	

【イメージ】

 

4.計算結果フィールドを選択し、値で単純データバインディングを選択肢、データソース「dataRow」、バインド先「Subject(件名)」を選択します。(dataRowは繰り返しコントロールのコレクション名)

【XPagesソース】

	<!-- 品名 -->

	<xp:text escape="true" id="computedField1"

	        value="#{dataRow.Subject}">

	</xp:text>

	

【イメージ】

 

5.右のコアコントロールから計算結果フィールドをドラッグ&ドロップで品名用の計算結果フィールドの下に配置し、単純データバインディングでデータソース「dataRow」、バインド先「Price(金額)」を選択します。

【XPagesソース】

	<!-- 金額 -->

	<xp:text escape="true" id="computedField2"

	        value="#{dataRow.Price}">

	</xp:text>

	

 

6.体裁を整えるために、品名用の計算結果フィールドを<h1>タグで囲い、金額用の計算結果フィールドを<p>タグで囲います。

【XPagesソース】

	<!-- 品名 -->

	<h1>

	<xp:text escape="true" id="computedField1"

	                value="#{dataRow.Subject}">

	        </xp:text>

	</h1>

	<!-- 金額 -->

	<p>

	        <xp:text escape="true" id="computedField2"

	                value="#{dataRow.Price}">

	        </xp:text>

	</p>

	

 

7.必要に応じて、計算結果フィールドの値の表示タイプやスタイルを変更して下さい。

 

 

4ページ目:フォームを表示する

1.1ページ目(cate1.xsp)をコピーし、4ページ目(frm.xsp)にリネームします。

 

2.4ページ目のXPagesを開き、データソースを選択、Dominoビューのデータソースを削除し、Domino文書のデータソースを追加。フォームを選択し、デフォルトアクションには「文書を開く」を選択します。

【イメージ】

 

3.ソースタブでヘッダーの内容を変更します。

【XPagesソース】

	<div data-role="header">

	        <h1>詳細</h1>

	</div>

	

 

4.繰り返しコントロールと、その中に挟まれたXPagesソースを削除します。

 

5.Listviewの中に<li>タグを配置し、計算結果フィールドで「Subject(品名)」と「Price(金額)」を表示します。

【XPagesソース】

	<ul data-role="listview">

	        <li>

	                <!-- 品名 -->

	                <h1>

	                        <xp:text escape="true" id="computedField1"

	                                value="#{document1.Subject}">

	                        </xp:text>

	                </h1>

	                <!-- 金額 -->

	                <p>

	                価格:

	                <xp:text escape="true" id="computedField2"

	                        value="#{document1.Price}">

	                </xp:text>

	                </p>

	        </li>

	</ul>

	

 

6.Listviewの下に繰り返しコントロールを配置します。(複数の添付ファイル画像を表示するため)

 

7.繰り返しコントロールを選択し、名前を削除、単純データバインディングで添付ファイル名の入っているフィールドを選択する。コレクション名には「filelist」と入力します。

【Xpagesソース】

	<xp:repeat rows="30" value="#{document1.ImageFileNameList}"

	        var="filelist">

	</xp:repeat>

	

【イメージ】

 

8.繰り返しコントロールのタグ内にイメージコントロールを配置し、イメージリソースに添付ファイルを読み込むコードを書き込みます。(一番後ろの「filelist」は繰り返しコントロールのコレクション名)

【SSJSソース】

	"/"+document1.getDocument().getUniversalID()+"/$File/"+filelist

	

【イメージ】

 

 

戻るボタンを作る

  • ヘッダー部分に戻るボタンを追加するには、2ページ目以降のpageコントロールを下記のように書き換えます。

【Xpagesソース】

	<div data-role="page" data-add-back-btn="true" data-theme="b">

	       <!--ヘッダの設定-->

	       <div data-role="header">

	              <a href="" data-rel="back">戻る</a>

	              <h1>種別</h1>

	       </div>

	

 

expanded Attachments (0)
collapsed Attachments (0)
expanded Versions (15)
collapsed Versions (15)
Version Comparison     
VersionDateChanged by              Summary of changes
15May 21, 2013, 11:03:18 AM~Rebecca Umkipuljip  
14May 21, 2013, 11:02:36 AM~Miriam Quettoomannivu  
This version (13)May 21, 2013, 11:01:51 AM~Miriam Quettoomannivu  
12May 21, 2013, 2:23:30 AM~Miriam Quettoomannivu  
11May 20, 2013, 10:55:20 AM~Miriam Quettoomannivu  
10May 20, 2013, 10:49:57 AM~Miriam Quettoomannivu  
9May 16, 2013, 3:21:15 PM~Miriam Quettoomannivu  
8May 16, 2013, 3:19:19 PM~Miriam Quettoomannivu  
7May 16, 2013, 12:14:22 PM~Miriam Quettoomannivu  
6May 16, 2013, 12:10:27 PM~Miriam Quettoomannivu  
5May 16, 2013, 12:06:41 PM~Miriam Quettoomannivu  
4May 16, 2013, 11:54:44 AM~Miriam Quettoomannivu  
3May 16, 2013, 11:53:00 AM~Miriam Quettoomannivu  
2May 16, 2013, 11:47:02 AM~Miriam Quettoomannivu  
1May 16, 2013, 11:42:22 AM~Miriam Quettoomannivu  
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedAbout
  • HCL Software
  • HCL Digital Solutions community
  • HCL Software support
  • BlogsDigital Solutions blog
  • Community LinkHCL Software forums and blogs
  • About HCL
  • Privacy
  • Accessibility